<template>
  <!-- <p>{{ data }}</p> -->

  <div>
    <h3>{{ dataRef.name }}</h3>
    <p>{{ dataRef.age }}</p>
    <ul>
      <li v-for="item in dataRef.hobbies">{{ item }}</li>
    </ul>

    <hr />
    <ul>
      <li v-for="item in chineseHobbies">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
// import data from "../../mock/data.json";
// import dict from "../../mock/dict.json";

import { reactive, toRefs, computed, onMounted, ref } from "vue";

// let data, dict;
const dataRef = ref({});
const dictRef = ref({});

/* 组件挂载完毕时模拟网络通信 */
onMounted(() => {
  /* Promise.all([p1,p2]) */
  Promise.all([
    // import函数返回值是一个履约【模块对象】的Promise
    import("../../mock/data.json"), //p1
    import("../../mock/dict.json"), //p2
  ])

    // 在所有的Promise对象都履约时 Promise.all作为一个整体履约
    .then(
      // 此时的values是[p1履约的结果,p2履约的结果]
      (values) => {
        console.log("values=", values);

        // ref
        dataRef.value = values[0].default;
        dictRef.value = values[1].default;

        console.log("data=", dataRef.value);
        console.log("dict=", dictRef.value);
      }
    );
    
});

const chineseHobbies = computed(() =>
  // dataRef.value.hobbies 在有值以后才执行 map
  dataRef.value.hobbies?.map((item) => dictRef.value[item])
);
</script>

<style lang="scss" scoped></style>
